<template>
  <div class="kitchen-display">
    <div class="save-setting" style="text-align: center">
      <div style="text-align: center">
        <h1>到期日期:{{ endDate }}</h1>
      </div>

      <!-- <div class="endDataTime">
        <el-table
          :data="
            vtrenewITiem.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 50%; margin: 0 auto"
          class="boxCost"
        >
          <el-table-column label="金额" prop="money"> </el-table-column>

          <el-table-column label="时间" prop="name"> </el-table-column>

          <el-table-column align="right" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.shopType, scope.row.type)"
                >续费</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div> -->

      <div class="vtRenew">
        <header class="vtRenewTitle">
          {{ typeNum == 2 ? "外卖版" : "堂食版" }}
        </header>
        <div class="vtRenewTime">
          <div
            class="vtRenewTimebox"
            v-for="(paymentPayItem, paymentPayIndex) in vtrenewITiem"
            :key="paymentPayIndex"
            @click="
              handleDelete(
                paymentPayItem.shopType,
                paymentPayItem.type,
                paymentPayItem.money
              )
            "
          >
            <div class="vtRenewTimeboxTop">
              {{ paymentPayItem.shopType == 2 ? "外卖版" : "堂食版"
              }}{{ paymentPayItem.name }}
            </div>
            <div class="vtRenewTimeboxBottom">
              <div class="vtRenewTimeAll">
                <p class="TimeboxBottomYear">
                  <span class="vtRenewYear">{{ paymentPayItem.name }}</span>
                </p>
                <p class="TimeboxBottomPrice">
                  <span class="vtRenew">￥{{ paymentPayItem.money }}</span>
                  <span class="vtRenewAverage"
                    >(&yen;{{ paymentPayItem.perMoney }})</span
                  >
                </p>
                <p class="TimeboxBottomSave" >
                  <span class="vtRenewSaveMoney" v-if="paymentPayItem.discount"
                    >立省{{ paymentPayItem.discount }}</span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="paymentPay" v-show="openCodePayjudge">
          <div class="paymentPayLeft">
            <div class="scanCode">
              <span>扫码支付</span>
            </div>
          </div>
          <div class="paymentPayRight">
            <div class="scantopay">
              <div class="scantopayleft">
                <div id="qrCodePay" ref="qrCode"></div>
              </div>
              <div class="scantopayright">
                <p class="scantopPrice">￥{{ alipayPrice }}</p>
                <p class="scantopPriceMode">支持使用微信支付</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="backMasklayer" v-show="codeimgMsg">
        <div class="imgCode">
          <h2>微信扫描二维码支付</h2>
          <div id="qrCodePay" ref="qrCode"></div>
          <span class="closePay" @click="closewin()">x</span>
        </div>
      </div> -->
      <div>
        <el-button
          style="display: none"
          type="text"
          @click="openHint"
        ></el-button>
      </div>
      <div>
        <el-button
          style="display: none"
          type="text"
          @click="openCodePay"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "ReportManage",
  data() {
    return {
      search: "",
      endDate: sessionStorage.getItem("endDate"),
      printer: 0,
      qrcode: 0,
      KdsData: [
        {
          type: "MAKI",
          orderList: [],
        },
        {
          type: "RECAI",
          orderList: [],
        },
        {
          type: "SUSHI",
          orderList: [],
        },
        {
          type: "TIEBAN",
          orderList: [],
        },
        {
          type: "YOUGUO",
          orderList: [],
        },
        {
          type: "JIUSHUI",
          orderList: [],
        },
      ],
      vtrenewITiem: [], //续费数据
      typeNum: "", //店铺类型
      alipayPrice: "",
      out_trade_no: "",
      trade_state: "",
      checkOut: "setchenOut",
      flag: false,
      codeimgMsg: false,
      openCodePayjudge:false,
    };
  },

  props: {},

  components: {},

  // async
  created() {
    this.getData();
    this.shopType();
    //  await this.vtrenew()
  },

  mounted() {},

  watch: {},

  computed: {},

  filters: {
    formatDateTime(inputTime) {
      const date = new Date(inputTime);
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? `0${month}` : month;
      let day = date.getDate();
      day = day < 10 ? `0${day}` : day;
      let hour = date.getHours();
      hour = hour < 10 ? `0${hour}` : hour;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? `0${minute}` : minute;
      second = second < 10 ? `0${second}` : second;
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    orderedTime(orderTime) {
      const timestamp = Date.parse(new Date()) / 1e3;
      let remain = timestamp - orderTime;
      let minute = Math.floor(remain / 60) < 0 ? 0 : Math.floor(remain / 60);
      let second = remain % 60 < 0 ? 1 : remain % 60;
      return `${minute < 10 ? "0" + minute : minute}:${
        second < 10 ? "0" + second : second
      }`;
    },

    /**
     * @method  toDateFriendly  时间友好显示
     * @param orderTime 下单时间戳
     * @returns {string}  格式化时间
     */
    toDateFriendly(orderTime) {
      let minute = 1e3 * 60;
      let hour = minute * 60;
      let day = hour * 24;
      let month = day * 30;
      let now = new Date().getTime() / 1e3;
      let diffValue = (now - orderTime) * 1e3;
      if (diffValue < 0) {
        return "";
      }
      let monthC = diffValue / month;
      let weekC = diffValue / (7 * day);
      let dayC = diffValue / day;
      let hourC = diffValue / hour;
      let minC = diffValue / minute;
      let result = "";
      if (monthC >= 1) {
        result = `${parseInt(monthC)}月前`;
      } else if (weekC >= 1) {
        result = `${parseInt(weekC)}周前`;
      } else if (dayC >= 1) {
        result = `${parseInt(dayC)}天前`;
      } else if (hourC >= 1) {
        result = `${parseInt(hourC)}小时前`;
      } else if (minC >= 1) {
        result = `${parseInt(minC)}分钟前`;
      } else {
        result = "刚刚";
      }
      return result;
    },
  },

  methods: {
    getData() {
      let ws = new WebSocket("ws://52.59.210.200:7000/websocket");
      ws.onopen = () => {
        //  订阅哪个店的
        ws.send(`{'op':'sub','args':${sessionStorage.getItem("shopId")}}`);
      };
      ws.onmessage = (res) => {
        this.KdsData.forEach((Kdsitem) => {
          Kdsitem.orderList = [
            ...JSON.parse(res.data).orders,
            ...Kdsitem.orderList,
          ];
          Kdsitem.orderList.forEach((order) => {
            order.isShow = !1;
            order.orderDetList.forEach((food) => {
              food.isShow = food.printer === Kdsitem.type ? !0 : !1;
              if (food.isShow) {
                order.isShow = !0;
              }
            });
          });
        });
      };
      ws.onclose = (evt) => {
        // console.log("WebSocketClosed!");
      };
      ws.onerror = (evt) => {
        // console.log("WebSocketError!");
      };
    },

    // 获取店铺类型
    shopType() {
      this.$axios
        .get(
          `${
            this.$REQ_URL
          }shopcenter&action=shop_info&shopid=${sessionStorage.getItem(
            "shopId"
          )}`
        )
        .then((res) => {
          if (res.data.state == 200) {
            if (res.data.data.typeshop <= 1) {
              this.typeNum = 1;
            } else {
              this.typeNum = res.data.data.typeshop;
            }

            let dateTime = parseInt(res.data.data.endtime + "000");
            sessionStorage.setItem(
              "endDate",
              new Date(dateTime).toLocaleDateString()
            );
            this.endDate = new Date(dateTime).toLocaleDateString();
            this.vtrenew();
          } else {
          }
        });
    },
    vtrenew() {
      this.$axios
        .get(`${this.$PAY_MENT}shopType=${this.typeNum}&action=getInfo`)
        .then((res) => {
          if (res.data.code == 200) {
            var data = res.data.arr;
            for (let i = 0; i < data.length; i++) {
              data[i].money = (data[i].money / 100).toFixed(2);
            }
            this.vtrenewITiem = res.data.arr;
          }
        });
    },

    // 打开支付提示
    openCodePay() {
      let confirmThis=this
      return new Promise(function (resolve, reject) {
        confirmThis.$confirm("是否支付?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
           resolve(true);
          })
          .catch(() => {
          reject(false)
          });
      });
    },
     handleDelete(shopType, type, money) {
      this.openCodePay().then((res)=>{
      this.qrCodeCommon(shopType, type, money)
      }, (error) => {
      })
   
    },

    qrCodeCommon(shopType, type, money){
      this.alipayPrice = money;
      let _this = this;
      if (_this.flag) return;
      _this.flag = true;
     this.openCodePayjudge=true
      document.getElementById("qrCodePay").innerHTML = "";
      clearInterval(_this.checkOut);
      this.$axios
        .get(
          `${this.$PAY_MENT}type=${type}&shopId=${sessionStorage.getItem(
            "shopId"
          )}&shopType=${shopType}&action=pay`
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.out_trade_no = res.data.out_trade_no;
            var qrcode = new QRCode(this.$refs.qrCode, {
              text: res.data.msg, // 需要转换为二维码的内容
              width: 150,
              height: 150,
              colorDark: "#000000",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H,
            });
            _this.flag = false;
            _this.codeimgMsg = true;
            _this.checkOut = setInterval(function () {
              if (_this.trade_state == "SUCCESS") {
                clearInterval(_this.checkOut);
                _this.shopType();
                _this.trade_state = "";
                _this.openCodePayjudge = false;
              } else {
                _this.setSucceed();
              }
            }, 5000);
          }
        });
    },

    setSucceed() {
      let setThis = this;
      this.$axios
        .get(`${this.$PAY_MENT}action=checkOrder&orderId=${this.out_trade_no}`)
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.order.trade_state == "SUCCESS") {
              this.trade_state = res.data.order.trade_state;
              setThis.codeimgMsg = false;
              this.openHint(res.data.order.trade_state_desc);
            }
          } else {
            clearInterval(setThis.checkOut);
          }
        });
    },
    //支付提示
    openHint(msg) {
      this.$alert(msg, "提示", {
        dangerouslyUseHTMLString: true,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.kitchen-display {
  // background-color: #fff;
  text-align: center;
  .display-header {
    margin-bottom: 40px;
  }
  .display-content {
    margin: 0 300px;
    display: flex;
    .food-list {
      flex: 1;
      padding: 0 20px 20px;
      .food {
        display: flex;
        justify-content: space-between;
        border: 1px solid #00a0dc;
        height: 60px;
        line-height: 60px;
        margin-bottom: 10px;
        padding: 0 20px;
        .food-wrapper {
          display: flex;
          flex: 1;
          height: 60px;
          line-height: 60px;
          .food-name {
            flex: 1;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .food-count {
            flex: 0 0 35px;
          }
          .food-time {
            padding-left: 10px;
          }
        }
      }
    }
    .order-list {
      flex: 1;
      .order-title {
        width: 340px;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        .table-num {
          margin-right: 20px;
        }
      }
      .food {
        display: flex;
        justify-content: space-between;
        border: 1px solid #00a0dc;
        height: 60px;
        line-height: 60px;
        margin: 0 10px 10px;
        padding: 0 20px;
        .food-name {
          flex: 1;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .food-count {
          flex: 0 0 35px;
        }
      }
      .order {
        border: 1px solid #00a0dc;
        margin-bottom: 10px;
      }
    }
  }
}
.save-setting{
 width: 1600px;
 margin: 0 auto;
}
.save-setting,
.endDataTime {
  text-align: center;
  h1{
    color:#000;
    font-size: 40px;
    margin-top: 20px;
  }
}
.endDataTime {
  width: 100%;
}

.imgCode {
  padding: 20px;
  background: #f0f0f0;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9;
  transform: translate(-50%, -50%);
}
.imgCode h2 {
  font-size: 26px;
  margin: 0 10px 10px;
}
#qrCodePay {
  height: 150px;
  width: 150px;
  margin: 0 auto;
}
.closePay {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  font-size: 20px;
  height: 20px;
  line-height: 20px;
}

.backMasklayer {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.vtRenew {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  .vtRenewTitle {
    line-height: 100px;
    color: #80572b;
    font-size: 20px;
    font-weight: 600;
    width: 50%;
    height: 100px;
    margin: 0 auto;
    background: url("../../assets/imgs/takeoutactive.png") no-repeat;
  
  }
}
.vtRenewTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
  .vtRenewTimebox {
       height: 250px;
      width:500px;
    position: relative;
    cursor: pointer;
    .vtRenewTimeboxTop {
      background: url("../../assets/imgs/administrativeTime.png") no-repeat;
      height: 50px;
      z-index: 99;
      position: absolute;
      top: -25px;
      left: 0;
      width: 35%;
      color: #faeae0;
      font-size: 28px;
      text-align: center;
      line-height: 50px;
      background-size: 100% 100%;
    }
    .vtRenewTimeboxBottom {
      background: url("../../assets/imgs/administrationExpense.png") no-repeat;
      height: 250px;
      width:500px;
      position: relative;
      text-align: center;
      background-size: 100% 100%;
      .vtRenewTimeAll {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .TimeboxBottomYear {
          margin: 0;
          .vtRenewYear {
            font-size: 24px;
            color: #7c5b32;
          }
        }
        .TimeboxBottomPrice {
          margin: 0;
          .vtRenew {
            font-size: 30px;
            color: #bb7860;
            font-weight: 600;
            vertical-align: middle;
          }
          .vtRenewAverage {
            font-size: 20px;
            color: #000;
            vertical-align: middle;
          }
        }
        .TimeboxBottomSave {
          margin: 0;
          height: 35px;
          .vtRenewSaveMoney {
            margin-top: 5px;
            font-weight: 600;
            font-size: 20px;
            border-radius: 20px;
            padding: 5px 40px;
            color: #7e5a46;
            border: 2px solid #7e5a46;
            display: inline-block;
          }
        }
      }
    }
  }
}
.paymentPay {
  width: 100%;
  display: flex;
  border: 4px solid #c3a174;
  margin-top: 20px;
  .paymentPayLeft {
    width: 23%;
    border-right: 4px solid #c3a174;
    .scanCode {
      background: #fbdab1;
      width: 200px;
      height: 50px;
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;

      span {
        display: inline-block;
        font-size: 18px;
        text-align: center;
        position: relative;
        margin: 0;
        padding-left: 10px;
        margin-top: 12px;
      }
    }
  }
  .paymentPayRight {
    margin: 50px;
    .scantopay {
      display: flex;
      align-items: flex-end;
      .scantopayleft {
        // width: 150px;
        // height: 150px;
        border: 4px solid #343233;
      }
      .scantopayright {
        margin-left: 10px;
      }
    }
    .scantopayright {
      p {
        margin: 0;
      }

      .scantopPrice {
        font-weight: 600;
        font-size: 26px;
        color: #5d3226;
      }
      .scantopPriceMode {
        color: #8a7051;
        font-size: 20px;
      }
    }
  }
}
.paymentPayLeft .scanCode span:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: -5px;
  width: 4px;
  height: 14px;
  background: #563128;
}
</style>
